<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="收款" left-text left-arrow @click-left="$router.back()" @click-right="$router.push()">
				</van-nav-bar>
				<div class="popup">
					<div class="popupQian">
						<div class="popupTop">
							<img class="xiaoxiong" src="../../assets/images/xiaoxiong_03.png" alt="">
							<p class="qianName" v-text="receipt.walletName"></p>
							<p class="qianShuo">
								<span v-text="receipt.address"></span>
								<img class="fuzhi" src="../../assets/images/fuzhi_03.png" alt="" :data-clipboard-text="receipt.address" v-show="receipt.address" @click="copy">
							</p>
						</div>
						<div class="popupContent">
							<p><span v-text="receipt.title === nudefined ? '' : receipt.title"></span></p>
							<p><img :src="receipt.collectionCode" alt=""></p>
						</div>
						<div class="popupBottom">
							<div class="btmLeft" @click="show2= true">
								<img src="../../assets/images/qxuanzhuan_03.png" alt />
								<span>更换资产</span>
							</div>
							<div class="btmRight" @click="show1 = true">
								<img src="../../assets/images/jinge_03.png" alt />
								<span>指定金额</span>
							</div>
						</div>
						<!-- <div class="appoint" @click="show1 = true">
          <img src="../../assets/images/jinge_03.png" alt />
          <span>指定金额</span>
            </div>-->
					</div>
				</div>

				<!-- </van-popup> -->
				<!-- 请输入金额 -->
				<van-dialog v-model="show1" title="请输入金额" class="ExportMnemonic" show-cancel-button confirm-button-color="#0070e0" cancel-button-color="#0070e0" @confirm="$router.push()" @close="password = '';">
					<div class="ExportMnemonic-content">
						<van-field v-model="password" placeholder></van-field>
					</div>
				</van-dialog>

				<!-- 输入资产  -->
				<van-popup v-model="show2" position="bottom">
					<!-- <van-search placeholder="请输入搜索关键词" v-model="value" /> -->
					<van-cell-groupp>
						<div class="leixing">选择资产类型</div>
					</van-cell-groupp>
					<van-cell-group class="groupBz">
						<img class="txing" src="../../assets/images/txing.png" alt />
						<span class="tft">TFT</span>
						<span class="lve">
              余额
              <span>0</span>
						</span>
						<div class="hook">
							<van-icon name="success" />
						</div>

						<!-- <van-icon slot="right-icon" name="success" style="line-height: inherit;" /> -->
					</van-cell-group>
					<van-cell-group class="groupBz">
						<img class="txing" src="../../assets/images/txing.png" alt />
						<span class="tft">TFT</span>
						<span class="lve">
              余额
              <span>0</span>
						</span>
					</van-cell-group>
					<van-cell-group class="groupBz">
						<img class="txing" src="../../assets/images/txing.png" alt />
						<span class="tft">TFT</span>
						<span class="lve">
              余额
              <span>0</span>
						</span>
					</van-cell-group>
					<van-cell-group class="groupBz">
						<img class="txing" src="../../assets/images/txing.png" alt />
						<span class="tft">TFT</span>
						<span class="lve">
              余额
              <span>0</span>
						</span>
					</van-cell-group>
					<van-cell-group class="groupBz">
						<img class="txing" src="../../assets/images/txing.png" alt />
						<span class="tft">TFT</span>
						<span class="lve">
              余额
              <span>0</span>
						</span>
					</van-cell-group>
				</van-popup>
			</div>
		</div>
	</div>
</template>

<script>
	import { assets } from '../../utils/api.js'
	export default {
		data() {
			return {
				show: true,
				show1: false,
				show2: false,
				list: [],
				receipt: {},
			};
		},
		mounted() {
			assets.getReceipt({
				address: localStorage.address
			}).then(res => {
				if(res.code == 200) {
					this.receipt = res.data;
				}
			})
		},
		methods: {
			copy() {
				let clipboard = new ClipboardJS('.fuzhi')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: rgba(0, 0, 0, 0.7);
	}
	
	.van-nav-bar {
		background: transparent;
	}
	
	.van-nav-bar__title {
		color: #FFFFFF;
	}
	
	.van-nav-bar .van-icon {
		color: #FFFFFF !important;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0;
	}
	
	.popupQian {
		height: 365px;
		width: 333px;
		position: relative;
		.popupTop {
			height: 85px;
			background-color: #0693c2;
			border-radius: 10px 10px 0 0;
			color: #fff;
			.xiaoxiong {
				width: 30px;
				height: 30px;
				position: absolute;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			.qianName {
				position: absolute;
				top: 35px;
				left: 50%;
				transform: translateX(-50%);
			}
			.qianShuo {
				position: absolute;
				top: 60px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 12px;
				width: 100%;
				text-align: center;
			}
			.fuzhi {
				width: 12px;
			}
		}
		.popupContent {
			height: 225px;
			border-bottom: 1px solid #ccc;
			position: relative;
			span {
				position: absolute;
				left: 50%;
				top: 35px;
				transform: translateX(-50%);
			}
			img {
				display: inline-block;
				width: 135px;
				position: absolute;
				left: 50%;
				top: 60px;
				transform: translateX(-50%);
			}
		}
		.popupBottom {
			height: 50px;
			display: flex;
			color: #3394e8;
			.btmLeft::before {
				content: "";
				height: 22px;
				width: 1px;
				background-color: #e3e3e3;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
			}
			.btmLeft {
				flex: 1;
				position: relative;
				height: 50px;
				// border-right: 1px solid #ccc;
				img {
					position: absolute;
					display: inline-block;
					// width: 18px;
					height: 18px;
					top: 50%;
					left: 40px;
					transform: translateY(-50%);
				}
				span {
					position: absolute;
					display: inline-block;
					top: 50%;
					left: 65px;
					transform: translateY(-50%);
				}
			}
			.btmRight {
				flex: 1;
				position: relative;
				height: 50px;
				img {
					position: absolute;
					display: inline-block;
					// width: 18px;
					height: 18px;
					top: 50%;
					left: 40px;
					transform: translateY(-50%);
				}
				span {
					position: absolute;
					display: inline-block;
					top: 50%;
					left: 65px;
					transform: translateY(-50%);
				}
			}
		}
	}
	
	.van-popup--center {
		border-radius: 10px;
	}
	
	.van-popup {
		overflow-y: visible;
	}
	
	.receivables {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		.nav {
			height: 50px;
			position: relative;
			display: flex;
			justify-content: center;
			i {
				left: 20px;
				top: 10px;
				position: absolute;
			}
			span {
				color: #fff;
			}
		}
	}
	
	.popup {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		position: fixed;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.van-popup--center {
		.password {
			// font-size: 1.25rem;
			// font-weight: 700;
			display: flex;
			justify-content: center;
			height: 50px;
			line-height: 45px;
			margin-bottom: 0.3125rem;
		}
		.van-button {
			display: block;
			width: 17.8125rem;
			margin: 0 1.0625rem;
			margin-bottom: 5px;
		}
		.van-button--primary {
			border: 1px solid #fff;
		}
		.van-button--plain.van-button--primary {
			color: #a7a7a7;
		}
	}
	
	.van-popup--bottom {
		border-radius: 10px;
		background-color: #f2f4f5;
	}
	
	.van-hairline--top-bottom::after,
	.van-hairline-unset--top-bottom::after {
		border-width: 0;
	}
	
	.van-popup {
		div {
			// height: 60px;
			.txing {
				display: inline-block;
				width: 30px;
			}
		}
	}
	
	.groupBz::before {
		content: "";
		position: absolute;
		width: 100%;
		bottom: 0;
		border-bottom: 1px solid #ebedf0;
		left: 25px;
	}
	
	.groupBz {
		height: 60px;
		width: 100%;
		position: relative;
		img {
			position: absolute;
			top: 15px;
			left: 30px;
		}
		.tft {
			position: absolute;
			top: 15px;
			left: 65px;
			font-size: 14px;
		}
		.lve {
			position: absolute;
			top: 30px;
			left: 65px;
			font-size: 12px;
			color: #c2c2c2;
		}
		.hook {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 15px;
			color: #3394e8;
			font-size: 20px;
		}
	}
	
	.leixing {
		height: 45px;
		text-align: center;
		line-height: 45px;
		color: #333333;
		border-radius: 10px 10px 0 0;
		background-color: #fff;
		margin-bottom: 5px;
	}
	
	.appoint {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		img {
			display: block;
			width: 15px;
			height: 15px;
			margin-right: 13px;
		}
		span {
			color: #3394e8;
		}
	}
	
	.ExportMnemonic {
		background: #f2f6f7;
		border-radius: 7px;
		.van-cell {
			background: #f2f6f7;
		}
		/deep/.van-cell__value {
			background: #ffffff;
			padding: 5px 10px;
		}
	}
</style>